import React, { useState } from 'react'
import { Layout } from 'antd';
import MainSideMenu from '@/components/MainSideMenu'
import SubSideMenu from '@/components/SubSideMenu'
import { getCurrentMenu } from '@/layouts/helpers'
import styles from './index.module.less'

export default ({ menu, handleMenuClick }) => {
  const [collapsed, setCollapsed] = useState(true)
  return (
    <Layout.Sider className={styles['sider-container']} width={54} onMouseEnter={() => setCollapsed(false)} onMouseLeave={() => setCollapsed(true)}>
      <MainSideMenu menu={getCurrentMenu(menu, 2)} handleMenuClick={handleMenuClick} collapsed={collapsed} />
      <SubSideMenu menu={getCurrentMenu(menu, 3)} handleMenuClick={handleMenuClick} collapsed={collapsed} />
    </Layout.Sider>
  )
}